<!DOCTYPE html>
<html lang="en">
<head>
	<title>Calendar - Custom Selection</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.6.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
	<link href="../../themes/wijmo/jquery.wijmo.wijcalendar.css" rel="stylesheet" type="text/css" />
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijpopup.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijcalendar.js" type="text/javascript"></script>
	<script type="text/javascript">
	    $(function () {
	        $("#calendar1").wijcalendar({
	            beforeSelect: function (e, data) {
	                var selDates = $("#calendar1").wijcalendar('option', 'selectedDates'), selected = false;
	                $.each(selDates, function (i, d) {
	                    if (data.date.getFullYear() === d.getFullYear() &&
							data.date.getMonth() === d.getMonth() &&
							data.date.getDate() === d.getDate()) {
	                        selected = true;
	                    }
	                });

	                if (selected)
	                    $("#calendar1").wijcalendar('unSelectDate', data.date);
	                else
	                    $("#calendar1").wijcalendar('selectDate', data.date);

	                var list = $("#msg").empty()
	                selDates = $("#calendar1").wijcalendar('option', 'selectedDates');
	                $.each(selDates, function (i, d) {
	                    var li = $("<li/>");
	                    li.text(d.getFullYear() + "/" + d.getMonth() + "/" + d.getDate());
	                    list.append(li);
	                });

	                return false;
	            }
	        });
	    });
	
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Custom Selection</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="calendar1">
			</div>
			<h4>Selected dates:</h4>
			<ul id="msg"></ul>
			<!-- End demo markup -->
				<!-- Begin options markup -->
				<!-- End options markup -->
		</div>
		<div class="footer demo-description">
			<p>
				This sample demonstrates how to customize the selection behavior by using the beforeSelect event and selectedDates array.
			</p>
		</div>
	</div>
</body>
</html>
